import _ from 'lodash';
import 'lib-flexible';
import './style.css';
// import F2 from '@antv/f2';
const F2 = require('@antv/f2/lib/index-all');
var $= require("jquery");
console.log($)
	const data = [{
	  name: '方向一',
	  percent: 83.59,
	  a: '1'
	}, {
	  name: '方向二',
	  percent: 14.24,
	  a: '1'
	}];
	
	const map = {};
	data.forEach(function(obj) {
	  map[obj.name] = obj.percent + '%';
	});
	
	const chart = new F2.Chart({
	  id: 'myChart',
	  pixelRatio: window.devicePixelRatio,
	  padding: [ 0, 'auto' ]
	});
	chart.source(data, {
	  percent: {
	    formatter: function formatter(val) {
	      return val + '%';
	    }
	  }
	});
	chart.tooltip(false);
	// chart.legend({
	//   position: 'bottom',
	//   itemFormatter: function itemFormatter(val) {
	//     return val + '    ' + map[val];
	//   }
	// });
	chart.legend("name",false);
	chart.coord('polar', {
	  transposed: true,
	  innerRadius: 0.7,
	  radius: 0.85
	});
	chart.axis(false);
	chart.interval()
	  .position('a*percent')
	  .color('name', [ '#0437AC', '#1CB3F0' ])
	  .adjust('stack');
	chart.pieLabel({
	  anchorOffset: 0, // 锚点的偏移量
	  inflectionOffset: 5, // 拐点的偏移量
	  // sidePadding: {Number}, // 文本距离画布左右两边的距离
	  // lineHeight: {Number}, // 文本的最大行高
	  adjustOffset: 15, // 发生调整时的偏移量
	  skipOverlapLabels:false, // 是否不展示重叠的文本
	  // lineStyle: {Object}, // 连接线的样式
	  // anchorStyle: {Object}, // 锚点的样式
	  label1:function(data,color){
		   return {
			   text: data.name
		   } 
	  }, 
	  // label2: {Function}, // label2 文本内容及其样式，Function 类型，回调函数
	  // onClick: {Function}, // 点击行为，回调函数
	  // triggerOn: {String}, // 点击行为触发的事件类型
	  // activeShape: {Boolean}, // 当有图形被选中的时候，是否激活图形
	  activeStyle: {Object}, // 设置激活图形的样式
	  label1OffsetY: -5, // label1 与连接线在垂直方向的偏移量
	  // label2OffsetY: {Number}, // label2 与连接线在垂直方向的偏移量  
	})
	chart.guide().html({
	  position: [ '50%', '50%' ],
	  html: `<div style="width: 250px;height: 40px;text-align: center;">
	      <div style="font-size: 14px;">1500</div>
	      <div style="font-size: 10px; color:#999999;">项目总数</div>
	    </div>`
	});
	chart.render();
	
	// 进度条
	$.fn.extend({
		initData: function(initObj) {
			// var innerEl = '<div class="m-percent-include" style="height: ' + initObj.height + 'px;">' +
			// 	'<div class = "m-no-percent" style="height: ' + initObj.height + 'px;">' +
			// 	'<div class = "m-bg-percent" style="height: ' + initObj.height + 'px;"></div>' +
			// 	'</div> </div> <spans class="m-percent">' + initObj.percent + '% </spans>'
			// $(this).append(innerEl)
			var _this = $(this)
			if(initObj.isAuto) {
				setTimeout(function() {
					_this.find('.m-percent-include').css({
						height: initObj.height + 'px',
						borderRadius: initObj.height / 2 + 'px'
					})
					_this.find('.m-no-percent').css({
						height: initObj.height + 'px',
						borderRadius: initObj.height / 2 + 'px',
						left: (initObj.percent - 100) + '%',
						transition: 'left 2s ease-in-out'
					})
					_this.find('.m-bg-percent').css({
						height: initObj.height + 'px',
						borderRadius: initObj.height / 2 + 'px',
						background: 'linear-gradient(to right,' + (initObj.bgStartColor ? initObj.bgStartColor : '#8BBAFE') + ',' + (initObj.bgEndColor ? initObj.bgEndColor : '#3581FF') + ')',
						left: (100 - initObj.percent) + '%',
						transition: 'left 2s ease-in-out'
					})
				}, 200)
			} else {
				_this.find('.m-percent-include').css({
					height: initObj.height + 'px',
					borderRadius: initObj.height / 2 + 'px'
				})
				_this.find('.m-no-percent').css({
					height: initObj.height + 'px',
					borderRadius: initObj.height / 2 + 'px',
					left: (initObj.percent - 100) + '%'
				})
				_this.find('.m-bg-percent').css({
					height: initObj.height + 'px',
					borderRadius: initObj.height / 2 + 'px',
					background: 'linear-gradient(to right,' + (initObj.bgStartColor ? initObj.bgStartColor : '#8BBAFE') + ',' + (initObj.bgEndColor ? initObj.bgEndColor : '#3581FF') + ')',
					left: (100 - initObj.percent) + '%'
				})
			}
		}
	})
	
	/*
	 * @params
	 * el: 进行自动动画的dom元素
	 * percent： 当前进度（动态变化）
	 * m_obj: 进度条高度，背景色参数 例： {height: 10, bgStartColor: '#feea4d', bgEndColor: '#ff3d00'}
	 */
	// function mAutoPlay(el, percent, m_obj) {
	// 	el.find('.m-percent').html(percent + '%')
	// 	el.find('.m-percent-include').css({
	// 		height: m_obj.height + 'px',
	// 		borderRadius: m_obj.height / 2 + 'px'
	// 	})
	// 	el.find('.m-no-percent').css({
	// 		height: m_obj.height + 'px',
	// 		borderRadius: m_obj.height / 2 + 'px',
	// 		left: (percent - 100) + '%'
	// 	})
	// 	el.find('.m-bg-percent').css({
	// 		height: m_obj.height + 'px',
	// 		borderRadius: m_obj.height / 2 + 'px',
	// 		background: 'linear-gradient(to right,' + (m_obj.bgStartColor ? m_obj.bgStartColor : '#feea4d') + ',' + (m_obj.bgEndColor ? m_obj.bgEndColor : '#ff3d00') + ')',
	// 		left: (100 - percent) + '%'
	// 	})
	// }
	
	$('#progress-container').initData({
		// height: ,
		percent:75,
		// bgStartColor: '',
		// bgEndColor: ''
	})
	
<<<<<<< HEAD
	
=======
	// 下拉
	$(function(){
		selectMenu(0);
		selectMenu(1);
		function selectMenu(index){
		   $(".select-menu-input").eq(index).val($(".select-this").eq(index).html());//在输入框中自动填充第一个选项的值
		   $(".select-menu-div").eq(index).on("click",function(e){
			   	  e.stopPropagation();
	             if($(".select-menu-ul").eq(index).css("display")==="block"){
					 $(".select-menu-ul").eq(index).hide();
					 $(".select-menu-div").eq(index).find("spans").removeClass("select-menu-i");
					 $(".select-menu-ul").eq(index).animate({marginTop:"50px",opacity:"0"},"fast");
				 }else{
					 $(".select-menu-ul").eq(index).show();
					 $(".select-menu-div").eq(index).find("spans").addClass("select-menu-i");
					 $(".select-menu-ul").eq(index).animate({marginTop:"5px",opacity:"1"},"fast");
				 }
				 for(var i=0;i<$(".select-menu-ul").length;i++){
				      if(i!==index&& $(".select-menu-ul").eq(i).css("display")==="block"){
					        $(".select-menu-ul").eq(i).hide();
							$(".select-menu-div").eq(i).find("spans").removeClass("select-menu-i");
							$(".select-menu-ul").eq(i).animate({marginTop:"50px",opacity:"0"},"fast");
					  }
				 }
	
		   });
		   $(".select-menu-ul").eq(index).on("click","li",function(){//给下拉选项绑定点击事件
			   $(".select-menu-input").eq(index).val($(this).html());//把被点击的选项的值填入输入框中
	           $(".select-menu-div").eq(index).click();
			   $(this).siblings(".select-this").removeClass("select-this");
			   $(this).addClass("select-this");
		   });
	     $("body").on("click",function(event){
	             event.stopPropagation();
	          if($(".select-menu-ul").eq(index).css("display")==="block"){
					console.log(1);
				  $(".select-menu-ul").eq(index).hide();
					 $(".select-menu-div").eq(index).find("spans").removeClass("select-menu-i");
					 $(".select-menu-ul").eq(index).animate({marginTop:"50px",opacity:"0"},"fast");
				 
			 }
	
		 });
	
		}
	
		   
	
	
	})
>>>>>>> ece23577c8a4f2584e9d79f15e2aa2e2477b6c36
	   
